<h2>
  Developer Tools
</h2>
<a class="card" href="examples/developer-tools/index.html">
  <img srcset="media/block-factory.png 2x" alt="">
  <div>
    <h4>
      Block Factory
    </h4>
    <p>
      Use the Block Factory to create custom blocks and generate the block definition and other code you need to get started.
    </p>
  </div>
</a>
<br>
<h2 id="plugins">
  Plugins
</h2>
<p>
  Plugins are NPM packages that extend or modify Blockly's functionality and can be included in any Blockly-based project.
</p>
<br>
<h3 id="fields">
  Fields
</h3>
<p>
  Field plugins add new kinds of fields that can be incorporated into custom blocks, allowing your users to enter information in different ways. Learn more about how to <a href="https://developers.google.com/blockly/guides/create-custom-blocks/fields/customizing-fields/overview">create and customize fields</a>.
</p>
<div class="grid">
  <a class="card" href="plugins/field-bitmap/test/index.html">
    <img srcset="media/bitmap-field.png 2x" alt="">
    <div>
      <h4>
        Bitmap Field
      </h4>
      <p>
        A field that lets users input a pixel grid by clicking or tapping.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/field-date/test/index.html">
    <img srcset="media/date-field.png 2x" alt="">
    <div>
      <h4>
        Date Field
      </h4>
      <p>
        A field that lets users enter a date using a date picker control.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/field-colour/test/index.html">
    <img srcset="media/colour-field.png 2x" alt="">
    <div>
      <h4>
        Colour Field
      </h4>
      <p>
        A field that lets users choose a colour. Although the core Blockly library includes this field, it will be removed before the end of 2023, so developers should use this plugin instead.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/field-colour-hsv-sliders/test/index.html">
    <img srcset="media/hsv-field.png 2x" alt="">
    <div>
      <h4>
        HSV Colour Field
      </h4>
      <p>
        A field that lets users choose a colour using hue, saturation and value (brightness) sliders, or by using an eyedropper tool to pick an onscreen colour.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/field-slider/test/index.html">
    <img srcset="media/slider-field.png 2x" alt="">
    <div>
      <h4>
        Slider Field
      </h4>
      <p>
        A field that allows users to enter a value using a slider.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/field-angle/test/index.html">
    <img srcset="media/angle-field.png 2x" alt="">
    <div>
      <h4>
        Angle Field
      </h4>
      <p>
        A field that lets users graphically choose an angle.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/field-grid-dropdown/test/index.html">
    <img srcset="media/dropdown-grid-field.png 2x" alt="">
    <div>
      <h4>
        Dropdown Grid Field
      </h4>
      <p>
        A dropdown field that displays the available choices in a grid.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/field-multilineinput/test/index.html">
    <img srcset="media/multiline-field.png 2x" alt="">
    <div>
      <h4>
        Multi-Line Text Field
      </h4>
      <p>
        A field that lets users enter multiple lines of text.
      </p>
    </div>
  </a>
  <a class="card vertical" href="plugins/field-dependent-dropdown/test/index.html">
    <video autoplay playsinline muted loop width="375px">
      <source src="media/dependent-dropdown-field.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Dependent Dropdown Field
      </h4>
      <p>
        A dropdown field whose available values depend on the chosen value in a separate dropdown field.
      </p>
    </div>
  </a>
</div>

<h3 id="blocks">
  Blocks
</h3>
<p>
  These plugins provide new types of blocks or modify the behavior of existing ones. Learn more about <a href="https://developers.google.com/blockly/guides/create-custom-blocks/overview">creating custom blocks</a>.
</p>
<div class="grid">
  <a class="card" href="plugins/block-dynamic-connection/test/index.html">
    <video autoplay playsinline muted loop width="229px">
      <source src="media/dynamic-connections.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Dynamic Connection Blocks
      </h4>
      <p>
        A plugin that provides custom text, list and conditional blocks that dynamically add and remove inputs as the user interacts with them.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/block-plus-minus/test/index.html">
    <video autoplay playsinline muted loop width="211px">
      <source src="media/plus-minus.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        +/- Mutator Blocks
      </h4>
      <p>
        Custom logic, list, text, and function blocks that use + and - controls to add and remove inputs instead of the normal mutator interface.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/block-shareable-procedures/test/index.html">
    <img srcset="media/procedure-blocks.png 2x">
    <div>
      <h4>
        Procedure Blocks
      </h4>
      <p>
        These blocks allow users to define and call procedures. These have more functionality than the equivalent blocks in core, which allows them to be shared between workspaces. The Blockly team recommends that developers use these instead.
      </p>
    </div>
  </a>
  <a class="card third-party" href="https://www.npmjs.com/package/@mit-app-inventor/blockly-block-lexical-variables">
    <img src="media/lexical-variables.png">
    <div>
      <h4>
        Lexical Variables
      </h4>
      <p>
        A third-party plugin that provides blocks for creating and accessing lexical (local) variables.
      </p>
    </div>
  </a>
</div>

<h3 id="workspace">
  Workspace
</h3>
<p>
  These plugins add new features and functionality to the Blockly workspace.
</p>
<div class="grid">
  <a class="card" href="plugins/workspace-backpack/test/index.html">
    <img srcset="media/backpack.png 2x">
    <div>
      <h4>
        Backpack
      </h4>
      <p>
        A plugin that adds a lets users store block stacks in a "backpack" for later retrieval and reuse.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/workspace-minimap/test/index.html">
    <img srcset="media/workspace-minimap.png 2x">
    <div>
      <h4>
        Minimap
      </h4>
      <p>
        A plugin that adds a minimap to the workspace for improved navigation and organization.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/zoom-to-fit/test/index.html">
    <img srcset="media/zoom-to-fit.png 2x">
    <div>
      <h4>
        Zoom to Fit
      </h4>
      <p>
        A plugin that adds a zoom-to-fit control to the workspace that will adjust the zoom level to show all blocks.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/workspace-search/test/index.html">
    <img srcset="media/workspace-search.png 2x">
    <div>
      <h4>
        Workspace Search
      </h4>
      <p>
        A plugin that adds a search field to the workspace and highlights matching blocks as the user types.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/content-highlight/test/index.html">
    <img srcset="media/content-highlight.png 2x">
    <div>
      <h4>
        Content Highlight
      </h4>
      <p>
        A plugin that draws a bounding box around all of the blocks in the workspace.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/scroll-options/test/index.html">
    <video autoplay playsinline muted loop width="281px">
      <source src="media/scroll-options.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Scroll Options
      </h4>
      <p>
        A plugin that adds support for automatically scrolling the workspace when blocks are dragged to the edge and for scrolling while dragging a block.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/fixed-edges/test/index.html">
    <video autoplay playsinline muted loop width="241px">
      <source src="media/fixed-edges.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Fixed Edges
      </h4>
      <p>
        A plugin that provides a MetricsManager that can be used to prevent workspace expansion in certain directions.
      </p>
    </div>
  </a>
  <a class="card vertical" href="plugins/modal/test/index.html">
    <img srcset="media/modal.png 2x">
    <div>
      <h4>
        Modal Dialog
      </h4>
      <p>
        A plugin that allows you to display a modal dialog atop the workspace.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/keyboard-navigation/test/index.html">
    <video autoplay playsinline muted loop width="195px">
      <source src="media/keyboard-navigation.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Keyboard Navigation
      </h4>
      <p>
        A plugin that allows users to manipulate and connect blocks using a keyboard-driven cursor.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/shadow-block-converter/test/index.html">
    <video autoplay playsinline muted loop width="241px">
      <source src="media/shadow-converter.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Shadow Block Converter
      </h4>
      <p>
        A plugin that converts shadow blocks to normal blocks when they are edited.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/disable-top-blocks/test/index.html">
    <img srcset="media/disable-top-blocks.png 2x">
    <div>
      <h4>
        Disable Top Blocks
      </h4>
      <p>
        A plugin that hides the 'Enable' context menu option for orphan blocks. Works with the <code>disableOrphans</code> change listener in core.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/cross-tab-copy-paste/test/index.html">
    <video autoplay playsinline muted loop width="581px">
      <source src="media/cross-tab-copy-paste.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Cross-Tab Copy &amp; Paste
      </h4>
      <p>
        A plugin allows copying and pasting blocks between Blockly workspaces in separate tabs or windows.
      </p>
    </div>
  </a>
  <a class="card third-party" href="https://www.npmjs.com/package/@mit-app-inventor/blockly-plugin-workspace-multiselect">
    <video autoplay playsinline muted loop width="394px">
      <source src="media/multi-select.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Multi-Select
      </h4>
      <p>
        A third-party plugin that allows selecting and manipulating multiple block stacks at once.
      </p>
    </div>
  </a>
</div>

<h3 id="toolbox">
  Toolbox
</h3>
<p>
  These plugins add new features and functionality to the Blockly toolbox. Learn more about <a href="https://developers.google.com/blockly/guides/configure/web/toolbox">customizing the toolbox</a>.
</p>
<div class="grid">
  <a class="card" href="plugins/typed-variable-modal/test/index.html">
    <img srcset="media/typed-variable-modal.png">
    <div>
      <h4>
        Typed Variable Modal
      </h4>
      <p>
        A plugin that adds ability to create a modal for creating typed variables.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/continuous-toolbox/test/index.html">
    <video autoplay playsinline muted loop>
      <source src="media/continuous-toolbox.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Continuous Toolbox
      </h4>
      <p>
        A toolbox that presents all available blocks in a continuously scrollable list.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/toolbox-search/test/index.html">
    <video autoplay playsinline muted loop>
      <source src="media/toolbox-search.mp4" type="video/mp4">
    </video>
    <div>
      <h4>
        Toolbox Search
      </h4>
      <p>
        A toolbox category that adds a search field to the toolbox and filters available blocks as you type.
      </p>
    </div>
  </a>
  <a class="card" href="plugins/suggested-blocks/test/index.html">
    <div>
      <h4>
        Suggested Blocks
      </h4>
      <p>
        A Blockly plugin that suggests blocks for the user based on which blocks they've used already in the workspace.
      </p>
    </div>
  </a>
</div>

<h3 id="themes">
  Themes
</h3>
<p>
  Themes let you customize the visual appearance of Blockly. Learn more about <a href="https://developers.google.com/blockly/guides/configure/web/appearance/overview">creating custom themes</a>.
</p>
<div class="grid">
  <a class="card vertical" href="plugins/theme-dark/test/index.html">
    <img srcset="media/dark-theme.png 2x">
    <div>
      <h4>
        Dark Theme
      </h4>
      <p>
        A theme that uses darker colours than the default.
      </p>
    </div>
  </a>
  <a class="card vertical" href="plugins/theme-modern/test/index.html">
    <img srcset="media/modern-theme.png 2x">
    <div>
      <h4>
        Modern Theme
      </h4>
      <p>
        A slight variant of the default Blockly theme that uses darker borders and flatter blocks.
      </p>
    </div>
  </a>
  <a class="card vertical" href="plugins/theme-highcontrast/test/index.html">
    <img srcset="media/high-contrast-theme.png 2x">
    <div>
      <h4>
        High Contrast Theme
      </h4>
      <p>
        A theme that improves accessibility by using more contrasting colours and darker text to make blocks more legible.
      </p>
    </div>
  </a>
  <a class="card vertical" href="plugins/theme-tritanopia/test/index.html">
    <img srcset="media/tritanopia-theme.png 2x">
    <div>
      <h4>
        Tritanopia Theme
      </h4>
      <p>
        A theme that makes Blockly more accessible for individuals with tritanopia, a form of colourblindness.
      </p>
    </div>
  </a>
  <a class="card vertical" href="plugins/theme-deuteranopia/test/index.html">
    <img srcset="media/deuteranopia-theme.png 2x">
    <div>
      <h4>
        Deuteranopia Theme
      </h4>
      <p>
        A theme that makes Blockly more accessible for individuals with deuteranopia, a form of colourblindness.
      </p>
    </div>
  </a>
</div>

<h2>Examples</h2>
<p>These self-contained example projects demonstrate techniques to include and extend the Blockly library.</p>
<ul>
  <li>
    Customization
    <ul>
      <li><a href="examples/turtle-field-demo/index.html">Turtle Fields</a>: A demo of creating custom block fields.</li>
      <li><a href="examples/pitch-field-demo/index.html">Pitch Field</a>: Another demo of creating custom block fields.</li>
      <li><a href="examples/custom-dialogs-demo/index.html">Custom Dialogs</a>: A demo overriding Blockly browser dialogs with custom implementations.</li>
      <li><a href="examples/custom-tooltips-demo/index.html">Custom Tooltips</a>: An example of using a custom tooltip renderer.</li>
      <li><a href="examples/toolbox-demo/index.html">Custom Toolbox</a>: A demo of a complex category structure for the toolbox.</li>
    </ul>
  </li>
  <li>
    Workspace
    <ul>
      <li><a href="examples/max-blocks-demo/index.html">Block Limit</a>: A demo limiting the total number of blocks allowed for academic exercises.</li>
      <li><a href="examples/mirror-demo/index.html">Mirrored Blockly</a>: A demo using two Blockly instances connected as leader-follower.</li>
      <li><a href="examples/resizable-demo/index.html">Resizable Workspace</a>: A demo of injecting Blockly into a page as a resizable element.</li>
      <li><a href="examples/fixed-demo/index.html">Fixed Size Workspace</a>: A demo injecting Blockly into a page as a fixed element.</li>
      <li><a href="examples/single-direction-scroll-demo/index.html">Single Direction Scrolling</a>: A demo of configuring single-direction scrollbars.</li>
      <li><a href="examples/rtl-demo/index.html">RTL</a>: A demo of what Blockly looks like in right-to-left mode (for Arabic and Hebrew).</li>
      <li><a href="examples/backpack-demo/index.html">Shared Backpack</a>: A demo of two Blockly instances with a shared backpack.</li>
    </ul>
  </li>
  <li>
    Code Generation &amp; Execution
    <ul>
      <li><a href="examples/generator-demo/index.html">Generating and Running Code</a>: A demo of generating code from blocks and evaluating it.</li>
      <li><a href="examples/graph-demo/index.html">Real-Time Code Generation</a>: A demo of using event listeners to generate code and provide instant feedback as blocks are changed.</li>
      <li><a href="examples/headless-demo/index.html">Headless Blockly</a>: A demo of generating Python code from JSON with no graphics.</li>
      <li><a href="examples/interpreter-demo/step-execution.html">Block-by-Block Code Execution</a>: A demo of executing code step-by-step with a sandboxed JavaScript interpreter. See also <a href="examples/interpreter-demo/backwards.html">backwards execution</a> and <a href="examples/interpreter-demo/async-execution.html">async execution</a> demos.</li>
    </ul>
  </li>
</ul>
